<template>
  <div ref="warp" class="contentWarpBox">
    <div class="searchInfo">
      <div v-if="resultDics.LAYOUT_POSITION_WEB" class="left">
        <el-select
          v-model="getInitDate.advertisingType"
          class="marginRight3"
          style="width:120px;"
          clearable
          placeholder="广告类型"
        >
          <el-option
            v-for="item in advertisingTypeArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-if="resultDics.APPLICATION_RANGE"
          v-model="getInitDate.applicationRange"
          class="marginRight3"
          style="width:120px;"
          clearable
          placeholder="应用范围"
          @change="changePosition"
        >
          <el-option
            v-for="item in resultDics.APPLICATION_RANGE.children"
            :key="item.dicCode"
            :label="item.dicName"
            :value="item.dicCode"
          />
        </el-select>
        <el-select
          v-if="LAYOUT_POSITION"
          v-model="getInitDate.layoutPosition"
          class="marginRight3"
          style="width:120px;"
          clearable
          placeholder="投放位置"
        >
          <el-option
            v-for="item in resultDics.LAYOUT_POSITION_WEB.children"
            :key="item.dicCode"
            :label="item.dicName"
            :value="item.dicCode"
          />
        </el-select>
        <el-select
          v-else
          v-model="getInitDate.layoutPosition"
          class="marginRight3"
          style="width:120px;"
          clearable
          placeholder="投放位置"
        >
          <el-option
            v-for="item in resultDics.LAYOUT_POSITION_APP.children"
            :key="item.dicCode"
            :label="item.dicName"
            :value="item.dicCode"
          />
        </el-select>
        <el-select
          v-model="getInitDate.status"
          class="marginRight3"
          style="width:120px;"
          clearable
          placeholder="是否上架"
        >
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input
          v-model="getInitDate.tittle"
          placeholder="请输入标题"
          class="marginRight3"
          style="width:120px;"
          clearable
        />
        <el-button type="primary" @click.stop="searchInfoMations">搜 索</el-button>
      </div>
      <el-button
        v-if="accreditChildren.createAdvertising"
        class="right"
        type="primary"
        @click.stop="jump('create')"
      >新建广告</el-button>
    </div>
    <el-table
      ref="table"
      :height="this.$getTableHeight"
      highlight-current-row
      :data="tableData"
      border
      stripe
      tooltip-effect="dark"
    >
      <el-table-column label="标题" show-overflow-tooltip>
        <template slot-scope="scope">
          <span class="blue" @click.stop="changeActive(scope.row.id)">{{ scope.row.tittle }}</span>
        </template>
      </el-table-column>
      <el-table-column label="广告类型" show-overflow-tooltip>
        <template
          slot-scope="scope"
        >{{ scope.row.advertisingType == 0 ? "商机" :scope.row.advertisingType == 1 ?"直播" :scope.row.advertisingType == 2 ? "课程":'' }}</template>
      </el-table-column>
      <el-table-column prop="integra" show-overflow-tooltip label="投放时间段">
        <template slot-scope="scope">
          <span v-if="scope.row.startTime">{{ scope.row.startTime }} ~ {{ scope.row.endTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="应用范围" show-overflow-tooltip>
        <template
          slot-scope="scope"
        >{{ getDicNameInn({field:"应用范围",dicCode:scope.row.applicationRange}) }}</template>
      </el-table-column>
      <el-table-column prop="status" label="广告位置" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ getDicNameInn({field:"应用范围",dicCode:scope.row.applicationRange}) }}
          {{ scope.row.applicationRange&&scope.row.layoutPosition? "--" :'' }}{{ getPosition({position:scope.row.layoutPosition,category:scope.row.applicationRange}) }}
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="轮播顺序" show-overflow-tooltip />
      <el-table-column prop="status" label="是否上架" show-overflow-tooltip>
        <template
          slot-scope="scope"
        >{{ scope.row.status === true ? '是' :scope.row.status ===false ?"否":'&nbsp;' }}</template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.tittle">
            <span
              v-if="accreditChildren.deleteAdvertising"
              class="_delete"
              @click.stop="handleDeleteCursor(scope.row)"
            >删除</span>
          </span>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <Pagination
        class="right"
        :total-count="totalCount"
        :page-size="page.pageSize"
        :current-page="page.pageNo"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
    <div :class="active ? 'closeRightBox trans':'openRightBox trans'" @click.stop>
      <detail
        v-if="active"
        :id="jumpId"
        :page-height="pageHeight"
        :update-right="updateRight"
        @clearJumpId="clearJumpId"
        @editor="openDialog"
      />
    </div>
    <div v-if="dialogVisible" @click.stop>
      <el-dialog
        :title="isCreate ? '新建广告' : '编辑广告'"
        center
        :visible.sync="dialogVisible"
        width="800px"
        :close-on-click-modal="false"
        :before-close="handleClose"
      >
        <createAdver :id="jumpId" @closeDialog="handleClose" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import mmUrl from '~/utils/utilUrl'
import createAdver from '~/components/advert/createAdver'
import detail from '~/components/advert/detail'
import {
  getDicName,
  createDics,
  _currentChange,
  _sizeChange,
  _changeTable,
  _deleteMethods,
  _searchInfo,
  reduceArr,
  changeTableHeight
} from '~/utils/util'
import Pagination from '~/components/commom/pagination'
import mmInitDate from '~/utils/initData'
const item = mmInitDate.advertising.item
export default {
  components: {
    Pagination,
    createAdver,
    detail
  },
  data() {
    return mmInitDate.advertising.data
  },
  mounted() {
    this.initGetDate()
    const result = JSON.parse(sessionStorage.getItem('menu'))
    this.accreditArr = reduceArr(result, '/' + this.$route.name) // 权限控制
    this.accreditChildren = createDics(
      this.accreditArr.children,
      'permissionCode'
    )
  },
  methods: {
    handleClose() {
      this.dialogVisible = false
      this.updateRight = !this.updateRight
      this.searchInfoMations('no')
    },
    clearJumpId() {
      this.active = false
      this.jumpId = null
    },
    openDialog() {
      this.isCreate = false
      this.dialogVisible = true
    },
    changeActive(id) {
      this.active = true
      this.jumpId = id
    },
    changePosition(res) {
      this.LAYOUT_POSITION = res === 'Advertising_WEB'
      this.getInitDate.layoutPosition = null
    },
    jump(id) {
      this.dialogVisible = true
      this.jumpId = id
      id === 'create' ? (this.isCreate = true) : (this.isCreate = false)
    },
    changeTableData(res) {
      const that = this
      _changeTable(mmUrl.advertising.getadvertising, res, that)
    },
    handleSizeChange(val) {
      const result = _sizeChange(val, this.page, this.cacheSearchCondition)
      this.changeTableData(result)
    },
    handleCurrentChange(val) {
      const result = _currentChange(val, this.page, this.cacheSearchCondition)
      this.changeTableData(result)
    },
    searchInfoMations(res) {
      this.cacheSearchCondition = JSON.parse(JSON.stringify(this.getInitDate))
      const result = _searchInfo(res, this.page, this.cacheSearchCondition)
      this.changeTableData(result)
    },
    handleDeleteCursor(row) {
      const that = this
      _deleteMethods(mmUrl.advertising.deleteadvertising, row, that).then(
        () => {
          that.searchInfoMations('no')
        }
      )
    },
    getDicNameInn(res) {
      const result = Object.assign({ data: this.dics }, res)
      return getDicName(result)
    },
    getPosition(res) {
      if (res.category === 'Advertising_WEB') {
        return this.resultDics.LAYOUT_POSITION_WEB.children.filter(
          v => res.position === v.dicCode
        )[0].dicName
      } else if (res.category === 'Advertising_APP') {
        return this.resultDics.LAYOUT_POSITION_APP.children.filter(
          v => res.position === v.dicCode
        )[0].dicName
      }
    },
    initGetDate() {
      this.$post({
        url: mmUrl.advertising.pageload,
        data: {
          page: this.page
        }
      })
        .then(res => {
          this.resultDics = createDics(res.dics, 'dicCode')
          this.dics = res.dics
          this.totalCount = res.items.totalCount
          this.tableData = res.items.items
          this.loading = false
          changeTableHeight(this)
        })
        .catch(err => this.$message.error(err))
    }
  }
}
</script>

<style lang='scss'>
</style>
